<template lang="pug">
    v-toolbar(color="primary" fixed dark)
      v-toolbar-title
        // <v-toolbar-side-icon @click="handleDrawerToggle"></v-toolbar-side-icon>
      v-text-field.global-search(text solo-inverted prepend-inner-icon="search" label="搜索" clearable hide-details=true)
      v-spacer
      v-toolbar-items
        v-btn(icon @click="handleFullScreen()")
          v-icon fullscreen
        v-menu(offset-y)
          template(v-slot:activator="{ on }")
            v-btn(text v-on="on") 前往
          v-list
            v-list-item(v-for="(item, index) in appModules" :key="index" :to="item.path")
              v-list-item-title {{ item.meta.title }}
        v-menu(offset-y)
          template(v-slot:activator="{ on }")
            v-btn(text color="primary" v-on="on")
              v-avatar(size="30px")
                img(src="/static/avatar/man_4.jpg" alt="Michael Wang")
          v-list
            v-list-item(v-for="(item, index) in items" :key="index" @click="item.click")
              v-list-item-title {{ item.title }}
</template>
<script>
import NotificationList from '@/components/widgets/list/NotificationList'
import appModules from '@/router/paths'
import Util from '@/util'
export default {
  name: 'AppToolbar',
  components: {
    NotificationList
  },
  data() {
    return {
      appModules: appModules[0].children,
      items: [
        {
          icon: 'account_circle',
          href: '#',
          title: '选项',
          click: this.handleProfile
        },
        {
          icon: 'settings',
          href: '#',
          title: '设置',
          click: this.handleSetting
        },
        {
          icon: 'fullscreen_exit',
          href: '#',
          title: '登出',
          click: this.handleLogut
        }
      ]
    }
  },
  computed: {
    toolbarColor() {
      return this.$vuetify.options.extra.mainNav
    }
  },
  methods: {
    handleDrawerToggle() {
      this.$emit('side-icon-click')
    },
    handleFullScreen() {
      Util.toggleFullScreen()
    },
    handleLogut() {
      //handle logout
      this.$store
        .dispatch('app/logout')
        .then(() => {
          this.$store.commit('app/LOGOUT')
          this.$router.push('/login')
        })
        .catch(err => {
          this.$store.commit('app/LOGOUT')
          this.$router.push('/login')
          console.warn('登出失败')
        })
    },
    handleSetting() {},
    handleProfile() {}
  }
}
</script>

<style>
  .global-search .v-input__slot {
    margin-bottom: 0px;
  }
</style>
